<template>
  <!-- 
   外面是一个 el-form 来包裹整个内容
    :model 后的 form 是表示整个表单的内容将会存储到 form 这个对象下
    label-width 是表单的宽度
    max-width 是最大的表单宽度
  -->
  <el-form
    :model="form"
    label-width="auto"
    style="max-width: 600px"
  >
    <!-- 
      label 是左边的名称
      el-form-item 是单个表单 可以是输入框、单选框、多选框等
    -->
    <el-form-item label="Activity name">
      <!-- v-model 是双向数据绑定 -->
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <!-- 
        el-select 是下拉列表
      -->
      <el-select
        v-model="form.region"
        placeholder="please select your zone"
      >
        <!-- 
          el-option 是下拉列表中的元素
          label 是表示用户看到的内容
          value 是表示后台获取到的值
        -->
        <el-option
          label="Zone one"
          value="shanghai"
        />
        <el-option
          label="Zone two"
          value="beijing"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <!-- 
        el-col 是当前一行的一个模块
        :span 是表示当前这一小个模块所占的宽度 
      -->
      <el-col :span="11">
        <!-- 
          el-date-picker 是日期选择器
        -->
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col
        :span="2"
        class="text-center"
      >
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <!-- 
          el-time-picker 是时间选择器
        -->
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <!-- 
        el-switch 是表示开关
      -->
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <!-- el-checkbox-group 是将复选框分组 -->
      <el-checkbox-group v-model="form.type">
        <!-- 
          el-checkbox 是单个复选框 
          value 是值 
          name 是后端存储到哪个表格中
        -->
        <el-checkbox
          value="Online activities"
          name="type"
        >
          <!-- 默认插槽 -->
          Online activities
        </el-checkbox>
        <el-checkbox
          value="Promotion activities"
          name="type"
        >
          Promotion activities
        </el-checkbox>
        <el-checkbox
          value="Offline activities"
          name="type"
        >
          Offline activities
        </el-checkbox>
        <el-checkbox
          value="Simple brand exposure"
          name="type"
        >
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <!-- el-radio-group 是将 radio 分为一组 -->
      <el-radio-group v-model="form.resource">
        <!-- el-radio 是单选框 -->
        <el-radio value="Sponsor">Sponsor</el-radio>
        <el-radio value="Venue">Venue</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <!-- 相当于 input 中的 textarea -->
      <el-input
        v-model="form.desc"
        type="textarea"
      />
    </el-form-item>
    <el-form-item>
      <!-- 
        el-button 是按钮 
        type 表示按钮的种类
      -->
      <el-button
        type="primary"
        @click="onSubmit"
      >Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'

  // do not use same name with ref
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  const onSubmit = () => {
    console.log('submit!')
  }
</script>
